<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>发起请求</button>
    <button>取消请求</button>
    <script>
        // 1. 获取按钮
        let btns = document.querySelectorAll('button');
        let x;
        // 2. 给发起请求添加点击事件        
        btns[0].onclick = function(){
            // 3. 创建XHR对象的构造函数 (重点)
            x = new XMLHttpRequest();
            // 4. 初始化发起一个请求（重点） - 延迟请求
            x.open('get','http://localhost/delayServer');
            // 5. 发送请求（重点）
            x.send();
            // 6. 绑定readyState改变的监听（重点）
            x.onreadystatechange = function(){
                // 5. 标识请求状态的只读属性（重点）
                // 6. status: 响应状态码值, 比如200, 404（重点） 
                // 7. response: 响应体数据, 类型取决于responseType的指定（重点）
                if(x.readyState===4){
                    if(x.status>=200 && x.status<300){
                        console.log(x.response);
                        
                    }
                }
            }
            // 8. 绑定一个取消请求监听事件
            x.onabort = function(){
                // 9. 执行取消函数
                console.log("请求被取消了");
            }
                
        }
           
        // 10. 给取消请求按钮添加点击事件
        btns[1].onclick = function(){
            // 11. 执行取消请求函数 x.abort()
            x.abort();
        }
            
    </script>
</body>

</html>